/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import styles from './launch.module.css'
import icon_empty from "@/assets/icon_empty.webp"
import icon_processing from "@/assets/icon_processing.webp"
import icon_refresh from "@/assets/icon_refresh.webp"
import { resultService } from "@/store/actions/ResultService";


export default function ProcessingLayout() {

    const [contentHeader, setContentHeader] = useState({ label: "处理中列表", isLoading: false });

    const [tableHeader] = useState([
        { label: "地区" },
        { label: "分类" },
        { label: "账号" },
        { label: "状态" }
    ]);

    const [results, setResults] = useState([]);

    useEffect(() => {

        reqResults();

        return () => {
        }
    }, [])

    // const reqResults = async () => {
    //     setContentHeader({ ...contentHeader, isLoading: true });
    //     apiResultList("processing", (success, resArray) => {
    //         setTimeout(() => {
    //             setContentHeader({ ...contentHeader, isLoading: false });
    //         }, 1500);
    //         setResults(resArray);
    //     });
    // }

    const reqResults = async () => {
        try {
            setContentHeader({ ...contentHeader, isLoading: true });
            const { success, data } = await resultService.getResultList("processing");
            setTimeout(() => {
                setContentHeader({ ...contentHeader, isLoading: false });
            }, 1500);

            setResults(data);

        } catch (error) {
            console.error("获取处理出错:", error);
        }
    }

    const onHandleRefreshClick = () => {
        if (contentHeader.isLoading) return;
        reqResults();
    }

    return (
        <div className={styles.launchListContent}>

            <div className={styles.launchHeaderContent}>
                <div className={`${styles.launchTitle} ${styles.launchFlexFull}`}>{contentHeader.label}</div>
                <img className={`${styles.launchTableListRowIcon} ${contentHeader.isLoading ? styles.launchLoading : ''}`} src={icon_refresh} alt="" onClick={onHandleRefreshClick} />
            </div>

            <div className={styles.launchTableHeaderContent}>
                {tableHeader && tableHeader.length > 0 && tableHeader.map((value, index) => {
                    return <div key={index} className={styles.launchTableHeaderRow}>{value.label}</div>
                })}
            </div>

            <div className={styles.launchTableListContent}>
                {results && results.length > 0 && results.map((value, index) => {
                    return <div key={index} className={styles.launchTableListRowContent}>
                        <div className={`${styles.launchTableListRow}`}>{value.country}</div>
                        <div className={`${styles.launchTableListRow}`}>{value.categorys.join(",")}</div>
                        <div className={`${styles.launchTableListRow}`}>{value.account.email}</div>
                        <div className={`${styles.launchTableListRow}`}>
                            <img className={styles.launchTableListRowIcon} src={icon_processing} alt="" />
                        </div>
                    </div>
                })}
            </div>
            {(!results || results.length === 0) && <div className={styles.launchEmptyContent}><img className={styles.launchEmptyIcon} src={icon_empty} alt="" /></div>}
        </div>
    )
}